<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="css/menu1.css" />
		<title>练习02 实现菜单的收缩与扩展</title>
	</head>

	<body>
		<div id="leftNav" class="left-nav">
			<div id="myMenu" class="menuBox">
				<ul class="spMenuBox">
					<li class="spMenuItem active">
						<div class="spMenu" id="1" onclick="myClick(this.id)">
							<i class="fa file fa-folder-open"></i>
							<span>菜单1</span>
							<i class="fa fa-2x fa-angle-down"></i>
						</div>
						<ul class="subMenuBox" id="subMenuBox1" style="display: block;">
							<li><span class="subMenu">菜单1.1</span></li>
							<li><span class="subMenu">菜单1.2</span></li>
							<li><span class="subMenu">菜单1.3</span></li>
						</ul>
					</li>
					<li class="spMenuItem ">
						<div class="spMenu" id="2" onclick="myClick(this.id)">
							<i class="fa file fa-folder"></i>
							<span>菜单2</span>
							<i class="fa fa-2x fa-angle-down"></i>
						</div>
						<ul class="subMenuBox" id="subMenuBox2" style="display: none;">
							<li><span class="subMenu">菜单2.1</span></li>
							<li><span class="subMenu">菜单2.2</span></li>
							<li><span class="subMenu">菜单2.3</span></li>
							<li><span class="subMenu">菜单2.1</span></li>
							<li><span class="subMenu">菜单2.2</span></li>
							<li><span class="subMenu">菜单2.3</span></li>
						</ul>
					</li>
					<li class="spMenuItem">
						<div class="spMenu" id="3" onclick="myClick(this.id)">
							<i class="fa file fa-folder"></i>
							<span>菜单3</span>
							<i class="fa fa-2x fa-angle-down"></i>
						</div>
						<ul class="subMenuBox" id="subMenuBox3" style="display: none;">
							<li><span class="subMenu">菜单3.1</span></li>
							<li><span class="subMenu">菜单3.2</span></li>
							<li><span class="subMenu">菜单3.3</span></li>
							<li><span class="subMenu">菜单3.1</span></li>
							<li><span class="subMenu">菜单3.2</span></li>
							<li><span class="subMenu">菜单3.3</span></li>
							<li><span class="subMenu">菜单3.1</span></li>
							<li><span class="subMenu">菜单3.2</span></li>
							<li><span class="subMenu">菜单3.3</span></li>
						</ul>
					</li>
					<li class="spMenuItem">
						<div class="spMenu" id="4" onclick="myClick(this.id)">
							<i class="fa file fa-folder"></i>
							<span>菜单4</span>
							<i class="fa fa-2x fa-angle-down"></i>
						</div>
						<ul class="subMenuBox" id="subMenuBox4" style="display: none;">
							<li><span class="subMenu">菜单4.1</span></li>
							<li><span class="subMenu">菜单4.2</span></li>
							<li><span class="subMenu">菜单4.3</span></li>
						</ul>
					</li>
					<li class="spMenuItem">
						<div class="spMenu" id="5" onclick="myClick(this.id)">
							<i class="fa file fa-folder"></i>
							<span>菜单5</span>
							<i class="fa fa-2x fa-angle-down"></i>
						</div> 
						<ul class="subMenuBox" id="subMenuBox5" style="display: none;">
							<li><span class="subMenu">菜单5.1</span></li>
							<li><span class="subMenu">菜单5.2</span></li>
							<li><span class="subMenu">菜单5.3</span></li>
							<li><span class="subMenu">菜单5.1</span></li>
							<li><span class="subMenu">菜单5.2</span></li>
							<li><span class="subMenu">菜单5.3</span></li>
						</ul>
					</li>
				</ul>
			</div>
		
		</div>
	</body>
	<script>
		
		//	189000503 左香菊

		function myClick(id){
			var menuBoxId = document.getElementById("subMenuBox" + id);
			var spMenuItems = document.getElementsByClassName("spMenuItem");
			var filename = document.getElementsByClassName("file");

			if(menuBoxId.style.display == "none"){
				menuBoxId.style.display = "block";
				spMenuItems[id-1].setAttribute("class","spMenuItem active");
				filename[id-1].setAttribute("class","fa file fa-folder-open");
			}else{
				menuBoxId.style.display = "none";
				spMenuItems[id-1].setAttribute("class","spMenuItem");
				filename[id-1].setAttribute("class","fa file fa-folder");
			}
		}
	</script>

</html>
